<template>
  <div class="header">
    <div class="top">
      <div class="main w">
        <el-input 
          placeholder="请输入内容" 
          clearable
          suffix-icon="el-icon-search"
          class="input"
          :value="value" 
          @input="handleInput"
          @change="handleChange"
          @clear="handleClear"
        ></el-input>
      </div>
    </div>
    <div class="navbar w">
      <el-menu :default-active="activePath" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item 
          v-for="(route, index) in navRoutes" 
          :index="route.path" 
          :key="index"
        >
          {{ route.label }}
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    // 输入框的值
    value: String,
    // 导航列表
    navRoutes: {
      type: Array,
      required: true
    },
    // 当前选中的导航path
    activePath: String
  },
  methods: {
    // 输入时触发，实现 v-model
    handleInput(value) {
      this.$emit('input', value)
    },
    // 失去焦点或按下回车键触发, 返回输入框的值
    handleChange(value) {
      this.$emit('on-change', value)
    },
    // 点击导航时触发，返回该导航的 route
    handleSelect(a) {
      const route = this.navRoutes.find((value) => a === value.path)
      this.$emit('on-select', route)
    },
    // 点击清除时触发
    handleClear() {
      this.$emit('input', '')
    }
  }
}
</script>

<style scoped>
.top {
  width: 100%;
  height: 105px;
  background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  box-shadow: 0 10px 10px #ccc;
}

.top .main {
  position: relative;
}

.top .main .input {
  position: absolute;
  width: 300px;
  right: 0;
  top: 32px;
}

.navbar {
  box-shadow: 0 10px 10px #ccc;
}
</style>